import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { Card, Badge, Select, Divider, List, Skeleton, message } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import { queryMessage, readMessage, listMessageClientSubType } from '@/services/user';
interface MessageListProps {
  messageTargetTypeEnum:
    | 'CONSTRUCTION_UNIT'
    | 'BANK'
    | 'OA_INSPECTION'
    | 'LABOUR_INSPECTION'
    | 'OWNER_INSPECTION';
  targetId: any;
}
const MessageList: React.FC<MessageListProps> = ({ messageTargetTypeEnum, targetId }) => {
  const [cyhSlect, setCyhSlect] = useState<any>([
    {
      label: '全部',
      value: '',
    },
  ]);
  const [cyhSlect2, setCyhSlect2] = useState<any>([
    {
      label: '全部',
      value: '',
    },
  ]);
  const [cyhSlect3, setCyhSlect3] = useState<any>([
    {
      label: '全部',
      value: '',
    },
  ]);
  const [cyhSlect4, setCyhSlect4] = useState<any>([
    {
      label: '全部',
      value: '',
    },
  ]);
  const [cyhSlect5, setCyhSlect5] = useState<any>([
    {
      label: '全部',
      value: '',
    },
  ]);
  const cyhHandleSlect: any[] = [
    {
      label: '待处理',
      value: '1',
    },
    {
      label: '已处理',
      value: '2',
    },
    {
      label: '全部',
      value: '0',
    },
  ];
  const [loading, setLoading] = useState(false);
  const [loading2, setLoading2] = useState(false);
  const [loading3, setLoading3] = useState(false);
  const [loading4, setLoading4] = useState(false);
  const [loading5, setLoading5] = useState(false);
  const [list, setList] = useState<any[]>([]);
  const [list2, setList2] = useState<any[]>([]);
  const [list3, setList3] = useState<any[]>([]);
  const [list4, setList4] = useState<any[]>([]);
  const [list5, setList5] = useState<any[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [hasMore2, setHasMore2] = useState<boolean>(true);
  const [hasMore3, setHasMore3] = useState<boolean>(true);
  const [hasMore4, setHasMore4] = useState<boolean>(true);
  const [hasMore5, setHasMore5] = useState<boolean>(true);
  const [pageInfo, setPageInfo] = useState<any>({
    pageNo: 1,
    pageSize: 10,
  });
  const [pageInfo2, setPageInfo2] = useState<any>({
    pageNo: 1,
    pageSize: 10,
  });
  const [pageInfo3, setPageInfo3] = useState<any>({
    pageNo: 1,
    pageSize: 10,
  });
  const [pageInfo4, setPageInfo4] = useState<any>({
    pageNo: 1,
    pageSize: 10,
  });
  const [pageInfo5, setPageInfo5] = useState<any>({
    pageNo: 1,
    pageSize: 10,
  });
  const [clientSelected, setClientSelected] = useState<any>(['', '', '', '', '']);
  const [changeSelected, setChangeSelected] = useState<any>(['1', '1', '1', '1', '1']);
  const [messageTotal, setMessageTotal] = useState<any>(0);
  const [messageTotal2, setMessageTotal2] = useState<any>(0);
  const [messageTotal3, setMessageTotal3] = useState<any>(0);
  const [messageTotal4, setMessageTotal4] = useState<any>(0);
  const [messageTotal5, setMessageTotal5] = useState<any>(0);

  const renderTitle = (info: any) => {
    return (
      <div className={styles.infoTop}>
        <span className={info.read ? styles.readTitle : styles.title}>{info.title}</span>
        {!info.read && (
          <span className={styles.action}>
            <a href={info.url} onClick={() => handleChange(info.id)}> 前往处理</a>
          </span>
        )}
      </div>
    );
  };
  const renderTitle2 = (info: any) => {
    return (
      <div className={styles.infoTop}>
        <span className={info.read ? styles.readTitle : styles.title}>{info.title}</span>
        {!info.read && (
          <span className={styles.action}>
            <a href={info.url} onClick={() => handleChange2(info.id)}> 前往处理</a>
          </span>
        )}
      </div>
    );
  };const renderTitle3 = (info: any) => {
    return (
      <div className={styles.infoTop}>
        <span className={info.read ? styles.readTitle : styles.title}>{info.title}</span>
        {!info.read && (
          <span className={styles.action}>
            <a href={info.url} onClick={() => handleChange3(info.id)}> 前往处理</a>
          </span>
        )}
      </div>
    );
  };const renderTitle4 = (info: any) => {
    return (
      <div className={styles.infoTop}>
        <span className={info.read ? styles.readTitle : styles.title}>{info.title}</span>
        {!info.read && (
          <span className={styles.action}>
            <a href={info.url} onClick={() => handleChange4(info.id)}> 前往处理</a>
          </span>
          )} 
      </div>
    );
  };const renderTitle5 = (info: any) => {
    return (
      <div className={styles.infoTop}>
        <span className={info.read ? styles.readTitle : styles.title}>{info.title}</span>
        {!info.read && (
          <span className={styles.action}>
            <a href={info.url} onClick={() => handleChange5(info.id)}> 前往处理</a>
          </span>
        )} 
      </div>
    );
  };
  const handleChange = async (value: any) => {
    if (!value) {
      return;
    }
    const res = await readMessage({ id: value });
    if (res && res.success) {
      setList((list) => {
        const newList = list.map((ele) => {
          if (ele.id == value) {
            ele.read = true;
          }
          return ele;
        });
        return newList;
      });
    } else {
      message.error(res.errMsg);
    }
  };
  const handleChange2 = async (value: any) => {
    if (!value) {
      return;
    }
    const res = await readMessage({ id: value });
    if (res && res.success) {
      setList2((list2) => {
        const newList = list2.map((ele) => {
          if (ele.id == value) {
            ele.read = true;
          }
          return ele;
        });
        return newList;
      });
    } else {
      message.error(res.errMsg);
    }
  };
  const handleChange3 = async (value: any) => {
    if (!value) {
      return;
    }
    const res = await readMessage({ id: value });
    if (res && res.success) {
      setList3((list3) => {
        const newList = list3.map((ele) => {
          if (ele.id == value) {
            ele.read = true;
          }
          return ele;
        });
        return newList;
      });
    } else {
      message.error(res.errMsg);
    }
  };
  const handleChange4 = async (value: any) => {
    if (!value) {
      return;
    }
    const res = await readMessage({ id: value });
    if (res && res.success) {
      setList4((list4) => {
        const newList = list4.map((ele) => {
          if (ele.id == value) {
            ele.read = true;
          }
          return ele;
        });
        return newList;
      });
    } else {
      message.error(res.errMsg);
    }
  };
  const handleChange5 = async (value: any) => {
    if (!value) {
      return;
    }
    const res = await readMessage({ id: value });
    if (res && res.success) {
      setList5((list5) => {
        const newList = list5.map((ele) => {
          if (ele.id == value) {
            ele.read = true;
          }
          return ele;
        });
        return newList;
      });
    } else {
      message.error(res.errMsg);
    }
  };
  const getMessageList = async (
    more = false,
    clientMesType: number,
    clientMesSubTypeIndex: number,
  ) => {
    if (loading) {
      return;
    }
    setLoading(true);
    let info: any = Object.assign(pageInfo, {});
    if (more) {
      ++info.pageNo;
    } else {
      info.pageNo = 1;
    }
    setPageInfo(info);
    const res = await queryMessage({
      type: messageTargetTypeEnum,
      targetId,
      read:
        changeSelected[clientMesSubTypeIndex] == '2'
          ? true
          : changeSelected[clientMesSubTypeIndex] == '1'
          ? false
          : null,
      clientMesType,
      clientMesSubType: clientSelected[clientMesSubTypeIndex],
      ...info,
    });
    if (res && res.success) {
      more ? setList([...list, ...res.data]) : setList(res.data);
      if (res.data.length < pageInfo.pageSize) {
        setHasMore(false);
      } else {
        setHasMore(true);
      }
      setLoading(false);
      setMessageTotal(res.total)
    } else {
      setLoading(false);
      message.error(res.errMsg || '');
    }
  };
  const getMessageList2 = async (
    more = false,
    clientMesType: number,
    clientMesSubTypeIndex: number,
  ) => {
    if (loading2) {
      return;
    }
    setLoading2(true);
    let info: any = Object.assign(pageInfo2, {});
    if (more) {
      ++info.pageNo;
    } else {
      info.pageNo = 1;
    }
    setPageInfo2(info);
    const res = await queryMessage({
      type: messageTargetTypeEnum,
      targetId,
      read:
        changeSelected[clientMesSubTypeIndex] == '2'
          ? true
          : changeSelected[clientMesSubTypeIndex] == '1'
          ? false
          : null,
      clientMesType,
      clientMesSubType: clientSelected[clientMesSubTypeIndex],
      ...info,
    });
    if (res && res.success) {
      more ? setList2([...list2, ...res.data]) : setList2(res.data);
      if (res.data.length < pageInfo2.pageSize) {
        setHasMore2(false);
      } else {
        setHasMore2(true);
      }
      setLoading2(false);
      setMessageTotal2(res.total)
    } else {
      setLoading2(false);
      message.error(res.errMsg || '');
    }
  };
  const getMessageList3 = async (
    more = false,
    clientMesType: number,
    clientMesSubTypeIndex: number,
  ) => {
    if (loading3) {
      return;
    }
    setLoading3(true);
    let info: any = Object.assign(pageInfo3, {});
    if (more) {
      ++info.pageNo;
    } else {
      info.pageNo = 1;
    }
    setPageInfo3(info);
    const res = await queryMessage({
      type: messageTargetTypeEnum,
      targetId,
      read:
        changeSelected[clientMesSubTypeIndex] == '2'
          ? true
          : changeSelected[clientMesSubTypeIndex] == '1'
          ? false
          : null,
      clientMesType,
      clientMesSubType: clientSelected[clientMesSubTypeIndex],
      ...info,
    });
    if (res && res.success) {
      more ? setList3([...list3, ...res.data]) : setList3(res.data);
      if (res.data.length < pageInfo3.pageSize) {
        setHasMore3(false);
      } else {
        setHasMore3(true);
      }
      setLoading3(false);
      setMessageTotal3(res.total)
    } else {
      setLoading3(false);
      message.error(res.errMsg || '');
    }
  };
  const getMessageList4 = async (
    more = false,
    clientMesType: number,
    clientMesSubTypeIndex: number,
  ) => {
    if (loading4) {
      return;
    }
    setLoading4(true);
    let info: any = Object.assign(pageInfo4, {});
    if (more) {
      ++info.pageNo;
    } else {
      info.pageNo = 1;
    }
    setPageInfo4(info);
    const res = await queryMessage({
      type: messageTargetTypeEnum,
      targetId,
      read:
        changeSelected[clientMesSubTypeIndex] == '2'
          ? true
          : changeSelected[clientMesSubTypeIndex] == '1'
          ? false
          : null,
      clientMesType,
      clientMesSubType: clientSelected[clientMesSubTypeIndex],
      ...info,
    });
    if (res && res.success) {
      more ? setList4([...list4, ...res.data]) : setList4(res.data);
      if (res.data.length < pageInfo4.pageSize) {
        setHasMore4(false);
      } else {
        setHasMore4(true);
      }
      setLoading4(false);
      setMessageTotal4(res.total)
    } else {
      setLoading4(false);
      message.error(res.errMsg || '');
    }
  };
  const getMessageList5 = async (
    more = false,
    clientMesType: number,
    clientMesSubTypeIndex: number,
  ) => {
    if (loading5) {
      return;
    }
    setLoading5(true);
    let info: any = Object.assign(pageInfo5, {});
    if (more) {
      ++info.pageNo;
    } else {
      info.pageNo = 1;
    }
    setPageInfo5(info);
    const res = await queryMessage({
      type: messageTargetTypeEnum,
      targetId,
      read:
        changeSelected[clientMesSubTypeIndex] == '2'
          ? true
          : changeSelected[clientMesSubTypeIndex] == '1'
          ? false
          : null,
      clientMesType,
      clientMesSubType: clientSelected[clientMesSubTypeIndex],
      ...info,
    });
    if (res && res.success) {
      more ? setList5([...list5, ...res.data]) : setList5(res.data);
      if (res.data.length < pageInfo5.pageSize) {
        setHasMore5(false);
      } else {
        setHasMore5(true);
      }
      setLoading5(false);
      setMessageTotal5(res.total)
    } else {
      setLoading5(false);
      message.error(res.errMsg || '');
    }
  };
  const selectChange = (value: any, index: number, clientMesType: number) => {
    let arr = clientSelected;
    arr[index] = value;
    setClientSelected(arr);
    switch (clientMesType) {
      case 1:
        getMessageList(false, clientMesType, index);
        break;
      case 2:
        getMessageList2(false, clientMesType, index);
        break;
      case 3:
        getMessageList3(false, clientMesType, index);
        break;
      case 4:
        getMessageList4(false, clientMesType, index);
        break;
      default:
        getMessageList5(false, clientMesType, index);
        break;
    }
  };
  const selectChange2 = (value: any, index: number, clientMesType: number) => {
    let arr = changeSelected;
    arr[index] = value;
    setChangeSelected(arr);
    switch (clientMesType) {
      case 1:
        getMessageList(false, clientMesType, index);
        break;
      case 2:
        getMessageList2(false, clientMesType, index);
        break;
      case 3:
        getMessageList3(false, clientMesType, index);
        break;
      case 4:
        getMessageList4(false, clientMesType, index);
        break;
      default:
        getMessageList5(false, clientMesType, index);
        break;
    }
  };
  const getSlectList = async () => {
    const response = await listMessageClientSubType({
      type: messageTargetTypeEnum,
      clientMesType: 1,
    });
    setCyhSlect([...cyhSlect,...response.data]);
    const response2 = await listMessageClientSubType({
      type: messageTargetTypeEnum,
      clientMesType: 2,
    });
    setCyhSlect2([...cyhSlect2,...response2.data]);
    const response3 = await listMessageClientSubType({
      type: messageTargetTypeEnum,
      clientMesType: 3,
    });
    setCyhSlect3([...cyhSlect3,...response3.data]);
    const response4 = await listMessageClientSubType({
      type: messageTargetTypeEnum,
      clientMesType: 4,
    });
    setCyhSlect4([...cyhSlect4,...response4.data]);
    const response5 = await listMessageClientSubType({
      type: messageTargetTypeEnum,
      clientMesType: 5,
    });
    setCyhSlect5([...cyhSlect5,...response5.data]);
  };

  useEffect(() => {
    getMessageList(false, 1, 0);
    getMessageList2(false, 2, 1);
    getMessageList3(false, 3, 2);
    getMessageList4(false, 4, 3);
    getMessageList5(false, 5, 4);
    getSlectList();
  }, []);
  return (
    <>
      <div className={styles.mainIndex}>
        <div className={styles.cardDiv}>
          <Card
            className={styles.card}
            title={
              <h3 className={styles.cardTitleDiv}>
                差异化
                <Badge
                  className="site-badge-count-109"
                  count={messageTotal}
                  style={{ backgroundColor: '#52c41a' }}
                />
              </h3>
            }
            bordered={false}
          >
            <div className={styles.searchDiv}>
              <Select
                className={styles.searchSelectDiv}
                options={cyhSlect}
                defaultValue={clientSelected[0]}
                onChange={(value) => selectChange(value, 0, 1)}
              />
              <Select
                className={styles.searchSelectDiv}
                options={cyhHandleSlect}
                defaultValue={changeSelected[0]}
                onChange={(value) => selectChange2(value, 0, 1)}
              />
            </div>
            <div className={styles.listDiv}>
              <InfiniteScroll
                dataLength={list.length}
                next={() => getMessageList(true, 1, 0)}
                scrollableTarget="listDiv"
                hasMore={hasMore}
                loader={<Skeleton paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more</Divider>}
                height={'400px'}
              >
                <List
                  dataSource={list}
                  renderItem={(item) => (
                    <List.Item
                      
                      style={{ cursor: 'pointer' }}
                      key={item.id}
                    >
                      <List.Item.Meta
                        title={renderTitle(item)}
                        description={
                          <span className={styles.description}>
                            <Badge color="#fff" />
                            {item.content}
                          </span>
                        }
                      />
                    </List.Item>
                  )}
                ></List>
              </InfiniteScroll>
            </div>
          </Card>
        </div>
        <div className={styles.cardDiv}>
          <Card
            className={styles.card}
            title={
              <h3 className={styles.cardTitleDiv}>
                保证金
                <Badge
                  className="site-badge-count-109"
                  count={messageTotal2}
                  style={{ backgroundColor: '#52c41a' }}
                />
              </h3>
            }
            bordered={false}
          >
            <div className={styles.searchDiv}>
              <Select
                className={styles.searchSelectDiv}
                options={cyhSlect2}
                defaultValue={clientSelected[1]}
                onChange={(value) => selectChange(value, 1, 2)}
              />
              <Select
                className={styles.searchSelectDiv}
                options={cyhHandleSlect}
                defaultValue={changeSelected[1]}
                onChange={(value) => selectChange2(value, 1, 2)}
              />
            </div>
            <div className={styles.listDiv}>
              <InfiniteScroll
                dataLength={list2.length}
                next={() => getMessageList2(true, 2, 1)}
                scrollableTarget="listDiv"
                hasMore={hasMore2}
                loader={<Skeleton paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more</Divider>}
                height={'400px'}
              >
                <List
                  dataSource={list2}
                  renderItem={(item) => (
                    <List.Item
                      style={{ cursor: 'pointer' }}
                      key={item.id}
                    >
                      <List.Item.Meta
                        title={renderTitle2(item)}
                        description={
                          <span className={styles.description}>
                            <Badge color="#fff" />
                            {item.content}
                          </span>
                        }
                      />
                    </List.Item>
                  )}
                ></List>
              </InfiniteScroll>
            </div>
          </Card>
        </div>
        <div className={styles.cardDiv}>
          <Card
            className={styles.card}
            title={
              <h3 className={styles.cardTitleDiv}>
                工资专户
                <Badge
                  className="site-badge-count-109"
                  count={messageTotal3}
                  style={{ backgroundColor: '#52c41a' }}
                />
              </h3>
            }
            bordered={false}
          >
            <div className={styles.searchDiv}>
              <Select
                className={styles.searchSelectDiv}
                options={cyhSlect3}
                defaultValue={clientSelected[2]}
                onChange={(value) => selectChange(value, 2, 3)}
              />
              <Select
                className={styles.searchSelectDiv}
                options={cyhHandleSlect}
                defaultValue={changeSelected[2]}
                onChange={(value) => selectChange2(value, 2, 3)}
              />
            </div>
            <div className={styles.listDiv}>
              <InfiniteScroll
                dataLength={list3.length}
                next={() => getMessageList3(true, 3, 2)}
                scrollableTarget="listDiv"
                hasMore={hasMore3}
                loader={<Skeleton paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more</Divider>}
                height={'400px'}
              >
                <List
                  dataSource={list3}
                  renderItem={(item) => (
                    <List.Item
                      style={{ cursor: 'pointer' }}
                      key={item.id}
                    >
                      <List.Item.Meta
                        title={renderTitle3(item)}
                        description={
                          <span className={styles.description}>
                            <Badge color="#fff" />
                            {item.content}
                          </span>
                        }
                      />
                    </List.Item>
                  )}
                ></List>
              </InfiniteScroll>
            </div>
          </Card>
        </div>
        <div className={styles.cardDiv}>
          <Card
            className={styles.card}
            title={
              <h3 className={styles.cardTitleDiv}>
                项目备案
                <Badge
                  className="site-badge-count-109"
                  count={messageTotal4}
                  style={{ backgroundColor: '#52c41a' }}
                />
              </h3>
            }
            bordered={false}
          >
            <div className={styles.searchDiv}>
              <Select
                className={styles.searchSelectDiv}
                options={cyhSlect4}
                defaultValue={clientSelected[3]}
                onChange={(value) => selectChange(value, 3, 4)}
              />
              <Select
                className={styles.searchSelectDiv}
                options={cyhHandleSlect}
                defaultValue={changeSelected[3]}
                onChange={(value) => selectChange2(value, 3, 4)}
              />
            </div>
            <div className={styles.listDiv}>
              <InfiniteScroll
                dataLength={list4.length}
                next={() => getMessageList4(true, 4, 3)}
                scrollableTarget="listDiv"
                hasMore={hasMore4}
                loader={<Skeleton paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more</Divider>}
                height={'400px'}
              >
                <List
                  dataSource={list4}
                  renderItem={(item) => (
                    <List.Item
                      style={{ cursor: 'pointer' }}
                      key={item.id}
                    >
                      <List.Item.Meta
                        title={renderTitle4(item)}
                        description={
                          <span className={styles.description}>
                            <Badge color="#fff" />
                            {item.content}
                          </span>
                        }
                      />
                    </List.Item>
                  )}
                ></List>
              </InfiniteScroll>
            </div>
          </Card>
        </div>
        <div className={styles.cardDiv}>
          <Card
            className={styles.card}
            title={
              <h3 className={styles.cardTitleDiv}>
                机构管理
                <Badge
                  className="site-badge-count-109"
                  count={messageTotal5}
                  style={{ backgroundColor: '#52c41a' }}
                />
              </h3>
            }
            bordered={false}
          >
            <div className={styles.searchDiv}>
              <Select
                className={styles.searchSelectDiv}
                options={cyhSlect5}
                defaultValue={clientSelected[4]}
                onChange={(value) => selectChange(value, 4, 5)}
              />
              <Select
                className={styles.searchSelectDiv}
                options={cyhHandleSlect}
                defaultValue={changeSelected[4]}
                onChange={(value) => selectChange2(value, 4, 5)}
              />
            </div>
            <div className={styles.listDiv}>
              <InfiniteScroll
                dataLength={list5.length}
                next={() => getMessageList5(true, 5, 4)}
                scrollableTarget="listDiv"
                hasMore={hasMore5}
                loader={<Skeleton paragraph={{ rows: 1 }} active />}
                endMessage={<Divider plain>It is all, nothing more</Divider>}
                height={'400px'}
              >
                <List
                  dataSource={list5}
                  renderItem={(item) => (
                    <List.Item
                      style={{ cursor: 'pointer' }}
                      key={item.id}
                    >
                      <List.Item.Meta
                        title={renderTitle5(item)}
                        description={
                          <span className={styles.description}>
                            <Badge color="#fff" />
                            {item.content}
                          </span>
                        }
                      />
                    </List.Item>
                  )}
                ></List>
              </InfiniteScroll>
            </div>
          </Card>
        </div>
      </div>
    </>
  );
};
export default MessageList;
